<template>
  <div class="statistics">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>统计报表</span>
          <div class="header-actions">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 280px; margin-right: 10px;"
            />
            <el-button type="primary" @click="handleRefresh">刷新数据</el-button>
          </div>
        </div>
      </template>
      <div class="content-body">
        <!-- 数据概览卡片 -->
        <div class="overview-cards">
          <el-card class="stat-card">
            <div class="stat-card-content">
              <div class="stat-title">总预约次数</div>
              <div class="stat-value">{{ totalBookings }}</div>
              <div class="stat-trend"><span class="positive">+12.5%</span> 较上月</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-card-content">
              <div class="stat-title">总收入(元)</div>
              <div class="stat-value income">{{ totalIncome }}</div>
              <div class="stat-trend"><span class="positive">+8.3%</span> 较上月</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-card-content">
              <div class="stat-title">活跃用户</div>
              <div class="stat-value">{{ activeUsers }}</div>
              <div class="stat-trend"><span class="positive">+5.2%</span> 较上月</div>
            </div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-card-content">
              <div class="stat-title">平均每日预约</div>
              <div class="stat-value">{{ avgDailyBookings }}</div>
              <div class="stat-trend"><span class="negative">-2.1%</span> 较上月</div>
            </div>
          </el-card>
        </div>
        
        <!-- 图表区域 -->
        <div class="charts-container">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>收入趋势</span>
              </div>
            </template>
            <div class="chart-content">
              <!-- 这里应该是图表，实际项目中可以使用 ECharts 或其他图表库 -->
              <div class="chart-placeholder">
                <svg width="100%" height="300" viewBox="0 0 800 300">
                  <!-- 模拟折线图 -->
                  <polyline 
                    points="50,250 150,180 250,220 350,150 450,120 550,180 650,100 750,80" 
                    fill="none" 
                    stroke="#409eff" 
                    stroke-width="3"
                  />
                  <!-- X轴 -->
                  <line x1="50" y1="250" x2="750" y2="250" stroke="#ddd" stroke-width="1"/>
                  <!-- Y轴 -->
                  <line x1="50" y1="250" x2="50" y2="50" stroke="#ddd" stroke-width="1"/>
                </svg>
              </div>
            </div>
          </el-card>
          
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>场地使用率</span>
              </div>
            </template>
            <div class="chart-content">
              <!-- 这里应该是图表，实际项目中可以使用 ECharts 或其他图表库 -->
              <div class="chart-placeholder">
                <svg width="100%" height="300" viewBox="0 0 800 300">
                  <!-- 模拟柱状图 -->
                  <rect x="80" y="150" width="80" height="100" fill="#409eff"/>
                  <rect x="180" y="120" width="80" height="130" fill="#67c23a"/>
                  <rect x="280" y="180" width="80" height="70" fill="#e6a23c"/>
                  <rect x="380" y="100" width="80" height="150" fill="#f56c6c"/>
                  <rect x="480" y="160" width="80" height="90" fill="#909399"/>
                  <!-- X轴 -->
                  <line x1="50" y1="250" x2="750" y2="250" stroke="#ddd" stroke-width="1"/>
                </svg>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 日期范围
const dateRange = ref(['2023-05-01', '2023-05-31'])

// 统计数据
const totalBookings = ref(1250)
const totalIncome = ref(125000)
const activeUsers = ref(320)
const avgDailyBookings = ref(41)

// 刷新数据
const handleRefresh = () => {
  ElMessage.success('统计数据已刷新')
  // 实际项目中这里应该调用API重新加载统计数据
}
</script>

<style scoped>
.statistics {
  padding: 20px;
}

.content-body {
  padding-top: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 15px;
}

.stat-title {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.income {
  color: #f56c6c;
}

.stat-trend {
  font-size: 12px;
  color: #909399;
}

.stat-trend .positive {
  color: #67c23a;
}

.stat-trend .negative {
  color: #f56c6c;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
}

.chart-card {
  height: 400px;
}

.chart-content {
  height: calc(100% - 44px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>